<template>
  <div id="app">
    <router-view></router-view>
    <footer>
      <keep-alive>
         <router-link to="/home" class="fir_home"><span class="app_icon">&#xe604;</span>首页</router-link></keep-alive>
        <keep-alive>
          <router-link to="/classify"><span class="app_icon">&#xe6ee;</span>分类</router-link></keep-alive>
        <keep-alive>
          <router-link to="/cart"><span class="app_icon">&#xe61d;</span>购物车</router-link></keep-alive>
        <keep-alive>
          <router-link to="/mine"><span class="app_icon">&#xe629;</span>我的</router-link></keep-alive>    
    </footer> 
  </div>
</template>

<script>
export default {
    name: 'app',
    data() {
      return {

      }
    },
    methods: {
      }   
}
</script>

<style>
footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.6rem;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: .35rem;
}
.router-link-active{
  color: #ff6b82;
}
.app_icon{
  font-family: 'iconfont';
  display: block;
  text-align: center;
  font-size: .6rem; 
  margin-bottom: .1rem;
}
@font-face {
  font-family: 'iconfont';  /* project id 283727 */
  src: url('//at.alicdn.com/t/font_yx4g0oc2gz2utyb9.eot');
  src: url('//at.alicdn.com/t/font_yx4g0oc2gz2utyb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_yx4g0oc2gz2utyb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_yx4g0oc2gz2utyb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_yx4g0oc2gz2utyb9.svg#iconfont') format('svg');
}
</style>
 